<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{ msg }}</p>
      <p>count: {{ count }}</p>
      <button v-on:click="add">btn</button>

      <ul>
        <li v-for="item in list">{{ item }}</li>
      </ul>
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp, nextTick } = Vue;

      const app = createApp({
        data() {
          return {
            msg: "hello vue!",
            // 这些实例上的属性仅在实例首次创建时被添加，因此你需要确保它们都出现在 data 函数返回的对象上。若所需的值还未准备好，在必要时也可以使用 null、undefined 或者其他一些值占位。
            count: 0,
            // 变量不要以_或者$开头
            list: [1, 2, 3],
          };
        },
        // mounted是一个生命周期，相当于onload
        // 在js里面使用data的变量，需要加this
        // 使用methods的方法，也需要加上this
        // 在html里面不需要加
        mounted() {
          // console.log(this.msg);
          // 通过数据请求，可以得到一个变量count
          // setTimeout(() => {
          // this.count = 10;
          // this.add();
          // }, 500);
        },
        methods: {
          add() {
            // DOM 更新时机, 数据的改变和页面的渲染不是一起发生的
            // 目的是为了减少dom操作的次数(dom虚拟有关)
            // this.count++;
            // this.count++;
            // this.count++;
            this.list.push(4); // 数据改变是同步的，页面渲染是异步
            // console.log(this.list);
            // console.log(document.querySelector("ul").children);

            // 下一次的事件轮询
            // 等待页面渲染结束以后再执行
            nextTick(() => {
              console.log(document.querySelector("ul").clientHeight);
            });
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
